<style>
body {
  background-image: url("../../views/img/loginAndReg.jpg");
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>

<template>
  <div>
    <el-card style="width:700px; height: 300px;margin: 100px auto">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;margin-left: 155px">
        <el-breadcrumb-item>
          <i class="el-icon-s-promotion"></i> 忘记密码？
        </el-breadcrumb-item>
        <el-breadcrumb-item>第2步: {{this.ruleForm.userPhone}}用户，重新修改您的密码！</el-breadcrumb-item>
      </el-breadcrumb>

      <el-divider></el-divider>

      <div style="width: 600px; margin: 0;height: 250px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="新密码" prop="userPassword">
            <el-input v-model="ruleForm.userPassword" placeholder="请输入新的密码！"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="ruleForm.confirmPassword" placeholder="再次输入您的密码！"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="submitForm('ruleForm')">确认</el-button>
            <el-button type="primary" @click="back()">上一步</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 8) {
        callback(new Error('请输入8-18位包含英文、数字的密码！'))
      } else {
        if (this.ruleForm.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword');
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.userPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        userPhone:'',
        userPassword: '',
        confirmPassword: '',
      },
      rules: {
        userPassword: [
          {validator: validatePass, trigger: 'blur'}
        ],
        confirmPassword: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    back(){
      this.$router.push('forgotPass');
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = this.qs.stringify(this.ruleForm);
          console.log(formData);
          let url = 'http://localhost:8080/user/forgotPass';
          console.log('url = ' + url);
          this.axios.post(url,formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state === 20000) {
              this.$notify.success({
                title: '提示',
                message: "修改密码成功，请重新登录！",
                showClose: true,
                position: 'top-right'
              });
              localStorage.setItem("userPhone",'');
              this.$router.push('/login');
            } else {
              this.$notify.warning({
                title: '提示',
                message: responseBody.message,
                showClose: true,
                position: 'top-right'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.ruleForm.userPhone = localStorage.getItem("userPhone");
    console.log("手机号是："+this.ruleForm.userPhone);
  }
}
</script>